<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryId">
            <selectFactory v-model="form.factoryId"></selectFactory>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="生产车间" prop="workshopId">
            <selectWorkshop v-model="form.workshopId"></selectWorkshop>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="部门" prop="deptId">
            <selectDept v-model="form.deptId"></selectDept>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="生产计划" >
            <el-button type="primary" @click="openSelectPlan=true">添加生产计划</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="form.moList">
            <el-table-column label="工厂" align="center" prop="factoryName" fixed="left" />
            <el-table-column label="生产车间" align="center" prop="workshopName" fixed="left" />
            <el-table-column label="批次号" align="center" prop="batchNo" fixed="left" width="150px" />
            <el-table-column label="工单号" align="center" prop="code" fixed="left" width="150px"/>
            <el-table-column label="计划单号" align="center" prop="planCode" width="150px" />
            <el-table-column label="产品名称" align="center" prop="itemName" width="150px" />
            <el-table-column label="产品代码" align="center" prop="itemCode" width="150px" />
            <el-table-column label="产品规格" align="center" prop="spec" width="150px" />
            <el-table-column label="产品图号" align="center" prop="drawCode" width="150px" />
            <el-table-column label="排产数量" align="center" prop="produceAmount" />
            <el-table-column label="开工时间" align="center" prop="startTime" width="250px">
              <template v-slot="scope">
                <el-date-picker clearable v-model="scope.row.startTime" type="date" value-format="timestamp" placeholder="选择开工时间" />
              </template>
            </el-table-column>
            <el-table-column label="工艺路线" align="center" prop="moRouteId"  width="200px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.moRouteId" placeholder="请选择">
                  <div v-for="item in itemProduceRouteOptions" >
                    <el-option :key="item.id" :label="item.routeName" :value="item.id" v-if="scope.row.itemProduceId == item.itemProduceId">
                      <span style="float: left">{{ item.routeName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.routeCode }}</span>
                    </el-option>
                  </div>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="流水号类型" align="center" prop="snType" width="150px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.snType" placeholder="请选择">
                  <el-option v-for="dict in snTypeOptions"
                             :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
              <template v-slot="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)" >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">重 置</el-button>
    </div>
    <!--    选择生产计划-->
    <SelectPlan :openSelectPlan.sync="openSelectPlan" @selectPlan="selectPlan"></SelectPlan>
  </div>
</template>

<script>
import { createMo, deleteMo } from '@/api/mes/mo'
import { getItemProduceRouteByItemProduceId } from  "@/api/mes/itemProduceRoute"
import SelectPlan from '@/components/SelectPlan'
import SelectFactory from '@/components/SelectFactory/index.vue'
import SelectWorkshop from '@/components/SelectWorkshop/index.vue'
import SelectDept from '@/components/SelectDept/index.vue'

export default {
  name: "Scheduling",
  components: {
    SelectPlan,
    SelectFactory,
    SelectWorkshop,
    SelectDept
  },
  data() {
    return {
      // 打开选择生产计划
      openSelectPlan: false,
      // 表单
      form: {},
      // 表单校验
      rules: {
        factoryId: [{ required: true, message: "工厂不能为空", trigger: "blur" }],
        workshopId: [{ required: true, message: "生产车间不能为空", trigger: "blur" }],
        deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
      },
      // 流水号类型选项
      snTypeOptions: [],
      // 产品工艺路线选项
      itemProduceRouteOptions: [],
    };
  },
  created() {
    this.getDict();
    this.reset();
  },
  methods: {
    /** 取消按钮 */
    cancel() {
      let that = this;
      this.$modal.confirm('是否确认重置表单？').then(function() {
        that.reset();
      }).then(() => {
        this.$modal.msgSuccess("重置成功");
      }).catch(() => {});
    },
    /** 表单重置 */
    reset() {
      this.form = {
        workshopId: undefined,
        deptId: undefined,
        moList: []
      };
      this.resetForm("form");
    },
    /** 获取字典 */
    getDict(){
      this.snTypeOptions = this.getDictDatas(this.DICT_TYPE.MES_SERIAL_TYPE);
    },
    /* 选择生产计划 */
    selectPlan(data) {
      this.handlePlan(data);
    },
    /* 处理排产信息 */
    async handlePlan(data){
      this.form.moList = [];
      // 提取产品生产信息
      const itemProduceIds = data.map(item => {return item.itemProduceId});
      const resp = await this.getProcessRoute(itemProduceIds);
      this.itemProduceRouteOptions = resp;
      // 处理数据
      for (let obj of data) {
        const itemRoute = resp.filter(item => {
          return item.itemProduceId == obj.itemProduceId && item.defaultRoute == 0;
        });
        console.log(obj)
        const info = {
          factoryId: obj.factoryId,
          factoryName: obj.factoryName,
          workshopId: obj.workshopId,
          workshopName: obj.workshopName,
          batchNo: obj.batchNo,
          code: obj.code,
          planId: obj.id,
          itemId: obj.itemId,
          itemName: obj.itemName,
          itemCode: obj.itemCode,
          spec: obj.spec,
          drawCode: obj.drawCode,
          itemProduceId: obj.itemProduceId,
          moRouteId: itemRoute[0].id,
          planCode: obj.code,
          snType: 0,
          startTime: obj.planStartTime,
          produceAmount: obj.planAmount,
        }
        this.form.moList.push(info)
      }
    },
    /* 查询工艺路线 */
    async getProcessRoute(params) {
      let resp = undefined;
      await getItemProduceRouteByItemProduceId(params).then(response => {
        resp = response.data;
      })
      return resp;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        createMo(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.reset();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(scope) {
      let moList = this.form.moList
      this.$modal.confirm('是否确认删除移除工单号为"' + scope.row.code + '"的数据项?').then(function() {
        moList.splice(scope.$index, 1);
      }).then(() => {
        this.$modal.msgSuccess("移除成功");
      }).catch(() => {});
    },
  }
};
</script>
<style>
.footer{
  margin-top: 30px;
}
</style>
